<template>
	<view class="daysRecommend">
		<uniCard>
			<template #leftHeader>每日推荐</template>
			<template #rightHeader>
				<view class="daysRecommendDay">
					<uni-icons type="calendar" size="25" color=""></uni-icons>
					{{new Date().getDate()}}号
				</view>
			</template>
			<template #default>
				<scroll-view class="scrollItem" scroll-x scroll-with-animation>
					<template v-for="item of dayRecommendImg" :key="item._id">
						<view class="recommendItem">
							<image class="recommendImg" :src="item.smallPicurl" @error="scrollImgShowError"
								@load="scrollImgShowSuccess" mode="heightFix" lazy-load></image>
						</view>
					</template>
				</scroll-view>
			</template>
		</uniCard>
	</view>
</template>

<script setup>
	import {
		getDayRecommendImgApi
	} from '@/Api/index/indexLayOut.js'

	import {
		ref
	} from 'vue'
	
	//导入组件
	import uniCard from '../../components/uniCard.vue'

	//定义每日推荐scroll-view图片
	const dayRecommendImg = ref([])

	//获取dayRecommendImg数据
	async function getDayRecommendImg() {
		const res = await getDayRecommendImgApi()
		dayRecommendImg.value = res.data
		console.log("每日推荐数据获取")
	}
	getDayRecommendImg()
	
	function scrollImgShowError(e) {
		console.log('unload', e)
	}
	
	function scrollImgShowSuccess(e) {
		// console.log('loaded', e)
	}
	
	//暴露出组件变量、函数等
	defineExpose({
		getDayRecommendImg
	})
</script>

<style lang="scss" scoped>
	.daysRecommend {
		margin-top: 60rpx;

		.daysRecommendDay {
			height: 100%;
			@include flexCenter();
			color: #13b07b;
			font-size: 25rpx;
		}

		.scrollItem {
			height: 450rpx;
			padding: 0 0 0 25rpx;
			white-space: nowrap;

			.recommendItem {
				display: inline-block;
				height: 100%;
				margin-right: 15rpx;

				&:nth-last-of-type(1) {
					margin-right: 50rpx;
				}

				.recommendImg {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}

			}
		}
	}
</style>